/* eslint-disable */
import * as d3 from 'd3'
import { useState } from 'react'
// import { LinePlot } from '@/components/LinePlot'
// import { useEffect } from 'react'
function D3Array() {
  const rawArrs = [3, 2, 1, 1, 6, 2, 4]
  const rawArrs2 = [{ a: 1 }, { a: 2 }, { a: 6 }]
  const extendArrs = d3.extent(rawArrs) // [1, 6]
  const extendArrs2 = d3.extent(rawArrs2, (d) => d.a) // [1, 6]
  console.log(extendArrs2)
}
function D3Liner() {
  const liner = d3.scaleLinear([10, 130], [0, 960]).unknown('#ccc')
  console.log(10, liner(10)) // r = 0
  console.log(15, liner(15)) // r =
  console.log(20, liner(10 * 2))
  console.log(50, liner(50))
  console.log(150, liner(150)) // the mapping will be extrapolated

  console.log(liner.invert(0))
  console.log(liner.invert(40))
  console.log(liner.invert(80))
  console.log(liner.invert(320))
  console.log(liner.invert(1120))

  console.log(liner.clamp())

  console.log(liner(null))

  const f = d3.tickFormat(0, 1, 15)
  console.log(f(2))
}
/**
 * data 是 input data array
 * @param {*} data
 */
function D3Line(data) {
  const canvas = document.getElementById('canvas')
  const ctx = canvas?.getContext('2d')
  const line = d3.line((p) => p[0]).curve(d3.curveStep)
  // .context(context)
  console.log(line.x())
  console.log(line.y())
  console.log(line.curve())
  // console.log(line.context())
  console.log(line.digits())

  console.log(line(data))
}
// D3Array()
// D3Liner()
D3Line([
  [1.1111, 2, 3, 4, 5],
  [11, 22, 33, 44, 55],
  [111, 222, 33, 44, 55],
])
function drawCircle(radius) {
  const path = d3.path()
  path.moveTo(radius, 0)
  path.arc(0, 0, radius, 0, 2 * Math.PI)
  return path.toString()
}
const towPointerPath = d3.path()

function draw(startPointer, endPointer) {
  towPointerPath.moveTo(...startPointer)
  // towPointerPath.lineTo(...endPointer)
  // towPointerPath.arcTo(150, 150, 300, 10, 40)
  // towPointerPath.arc(80, 80, 70, 0, Math.PI * 2)
  towPointerPath.rect(10, 10, 140, 140)
  towPointerPath.closePath()
  return towPointerPath.toString()
}
let isDrawing = false
// 点位一直在增加，但是宽度是固定的，所以会越来越密
const LinePlot = ({ data, width = 640, height = 400, marginTop = 20, marginRight = 20, marginBottom = 20, marginLeft = 20 }) => {
  if (data.length) {
    /**
     * // 返回一个linear函数
     * [0, data.length - 1] 是domain
     * [marginLeft, width - marginRight] range [20, 620]
     */
    const x = d3.scaleLinear([0, data.length - 1], [marginLeft, width - marginRight])
    const extendData = d3.extent(data)
    console.log(extendData)

    /**
     * d3.extent(data) d3.extent([3, 2, 1, 1, 6, 2, 4]) // [1, 6]
     * [380, 20]
     */
    const y = d3.scaleLinear(extendData, [height - marginBottom, marginTop])
    const line = d3
      .line(
        (d, i) => {
          console.log(i)

          return x(i)
        },
        (d) => {
          console.log(d)

          return y(d)
        }
      )
      // .digits(3)
      .curve(d3.curveStep)

    return (
      <svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" width={width} height={height}>
        <path fill="none" stroke="currentColor" strokeWidth="1.5" d={line(data)} />
        <g fill="white" stroke="currentColor" strokeWidth="1.5">
          {data.map((d, i) => (
            <circle key={i} cx={x(i)} cy={y(d)} r="2.5" />
          ))}
        </g>
      </svg>
    )
  } else {
    return null
  }
}

export default function App() {
  // console.log(d3.ticks(-2, 2, 200))
  // console.log(d3.ticks(-2, 2, 200).slice(-200))
  const [startPointer, setStartPointer] = useState([])
  const [endPointer, setEndPointer] = useState([])

  const [data, setData] = useState(() => []) //, setData
  const [circlePath, setCirclePath] = useState('')
  const [twoPointerPath, setTwoPointerPath] = useState('')

  const hanldeMouseMove = (event) => {
    if (isDrawing) {
      // console.log(event)
      const [x, y] = d3.pointer(event.nativeEvent)
      // console.log(x, y)
      setData(data.slice(-200).concat(Math.atan2(x, y)))
    }
  }

  const hanldeMouseDown = (event) => {
    const [x, y] = d3.pointer(event.nativeEvent)
    console.log(x, y)

    setStartPointer([x, y])
    isDrawing = true
  }
  const hanldeMouseUp = (event) => {
    const [x, y] = d3.pointer(event.nativeEvent)
    setEndPointer([x, y])
    isDrawing = false
  }
  const hanldeGenerateArc = () => {
    setCirclePath(drawCircle(40))
  }
  const hanldeGeneratePath = () => {
    setTwoPointerPath(draw([0, 0], endPointer))
  }
  return (
    <>
      <div>
        <div style={{ marginBottom: '10px' }}>
          <button onClick={hanldeGenerateArc}>生成弧形</button>
          <button onClick={hanldeGeneratePath}>两点之间生成线条</button>
        </div>
        <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
          <svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
            <path d={circlePath} />
          </svg>

          <div style={{ width: '640px', height: '400px', border: '1px solid #333' }}>
            <svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" width={640} height={400}>
              <path fill="none" stroke="currentColor" strokeWidth="1.5" d={twoPointerPath} />
              <circle cx="150" cy="150" r="3" fill="red" />
              <circle cx="300" cy="10" r="3" fill="red" />
              <circle cx="80" cy="80" r="3" fill="red" />
            </svg>
          </div>
          <div onMouseDown={hanldeMouseDown} onMouseMove={hanldeMouseMove} onMouseUp={hanldeMouseUp} style={{ width: '640px', height: '400px', border: '1px solid #333' }}>
            <LinePlot data={data} />
          </div>
        </div>
      </div>
    </>
  )
}
